<template>
  <div class="afterSale"><!--售后信息组件-->
      <div class="chunk-box reason" v-if="afterSaleList.afterSaleType=='1'"><!--仅退款1-->
           <el-form class="formDialog"  label-position="right" >
             <el-form-item label="退换/售后类型:"  label-width="125px" >
                 {{afterSaleList.afterSaleTypeName}}
             </el-form-item>
             <el-form-item label="货物状态:"  label-width="125px">
                {{afterSaleList.goodsStatusName}}
             </el-form-item>
             <el-form-item label="退款原因:"  label-width="125px">
                  {{afterSaleList.refundReasonName}}
             </el-form-item>

              <el-form-item label="凭证:"  label-width="125px">
               <el-image :src="item.fullFilename" fit="fill" v-image-preview="item.fullFilename" v-for="item in attachmentInfoList" class="img"></el-image>
             </el-form-item>
             <el-form-item label="退款编号:"  label-width="125px">
                  {{afterSaleList.afterSaleNo}}
             </el-form-item>
             <el-form-item label="申请时间:"  label-width="125px">
                   {{parseTime(afterSaleList.applyTime)}}
             </el-form-item>
            <el-form-item label="退款时间:"  label-width="125px">
                 {{parseTime(afterSaleList.confirmTime)}}
             </el-form-item>
              <el-form-item label="退款说明:"  label-width="125px" style="width:100%">
                  {{afterSaleList.note}}
             </el-form-item>
           </el-form>
       </div>

      <div class="chunk-box reason" v-if="afterSaleList.afterSaleType=='2'"><!--退货退款2-->
           <el-form class="formDialog"  label-position="right" >
             <el-form-item label="退换/售后类型:"  label-width="125px" >
                  {{afterSaleList.afterSaleTypeName}}
             </el-form-item>
             <el-form-item label="退款原因:"  label-width="125px">
                {{afterSaleList.refundReasonName}}
             </el-form-item>

             <el-form-item label="凭证:"  label-width="125px">
               <el-image :src="item.fullFilename" fit="fill" v-image-preview="item.fullFilename" v-for="item in attachmentInfoList" class="img"></el-image>
             </el-form-item>
             <el-form-item label="退货退款编号:"  label-width="125px">
                {{afterSaleList.afterSaleId}}
             </el-form-item>
             <el-form-item label="申请时间:"  label-width="125px">
                  {{parseTime(afterSaleList.applyTime)}}
             </el-form-item>
             <el-form-item label="退款时间:"  label-width="125px">
                 {{parseTime(afterSaleList.confirmTime)}}
             </el-form-item>
             <el-form-item label="退款说明:"  label-width="125px">
                  {{afterSaleList.note}}
             </el-form-item>
             <el-form-item label="物流公司:"  label-width="125px">
                  {{afterSaleList.expressName}}
             </el-form-item>
             <el-form-item label="运单号:"  label-width="125px">
                  {{afterSaleList.expressNumber}}
             </el-form-item>
             <div class="flow">
               <el-timeline >
                 <el-timeline-item
                   v-for="(activity, index) in logisticsList"
                   :key="index"
                   :color="index=='0'?'#FF6A18':'#909399'"
                   :timestamp="activity.context">
                   <div :style="{color:(index=='0'?'#FF6A18':'#909399')}">
                      <span class="status" style="margin-right:8px;font-size: 16px;">{{activity.status}}</span><span class="time">{{activity.time | format}}</span>
                   </div>

                 </el-timeline-item>
               </el-timeline>
             </div>
           </el-form>
       </div>


       <div class="chunk-box reason"  v-if="afterSaleList.afterSaleType=='3'"><!-- 换货3 -->
           <el-form class="formDialog"  label-position="right" >
             <el-form-item label="退换/售后类型:"  label-width="125px" >
                  {{afterSaleList.afterSaleTypeName}}
             </el-form-item>
             <el-form-item label="换货原因:"  label-width="125px">
                 {{afterSaleList.refundReasonName}}
             </el-form-item>

             <el-form-item label="凭证:"  label-width="125px">
               <el-image :src="item.fullFilename" fit="fill" v-image-preview="item.fullFilename" v-for="item in attachmentInfoList" class="img"></el-image>
             </el-form-item>
             <el-form-item label="换货编码:"  label-width="125px">
                 {{afterSaleList.afterSaleNo}}
             </el-form-item>
             <el-form-item label="申请时间:"  label-width="125px">
                   {{parseTime(afterSaleList.applyTime)}}
             </el-form-item>
             <el-form-item label="确认时间:"  label-width="125px">
                 {{parseTime(afterSaleList.confirmTime)}}
             </el-form-item>
             <!--<el-form-item label="物流公司:"  label-width="125px">
             {{afterSaleList.returnGoodsJson[0].logisticsCompany}}
             </el-form-item>
             <el-form-item label="运单号码:"  label-width="125px">
               {{afterSaleList.returnGoodsJson[0].logisticsNumber}}
             </el-form-item>-->
             <el-form-item label="换货说明:"  label-width="125px" style="width:100%">
                  {{afterSaleList.note}}
             </el-form-item>
            <!-- <el-form-item label="发货时间:"  label-width="125px">
                 2021-03-02  13:20:52
             </el-form-item>
             <el-form-item label="完成时间:"  label-width="125px">
                2021-03-05  13:20:52
             </el-form-item> -->
           </el-form>
       </div>
  </div>


</template>

<script>
 export default {
   name: "afterSale",
   props: ['afterSaleObj','img'],
   watch: {
   	afterSaleObj: function(value) {
   		this.afterSaleList = value;
      this.logisticsList = JSON.parse(value.expressTrack).lastResult.data;
   	},
   	img: function(value) {
   		this.attachmentInfoList = value;
   		console.log(this.attachmentInfoList)
   	},
   },
   data(){  
     return{
       afterSaleList:{},
       attachmentInfoList:[],//凭证图片
       logisticsList:[]//物流集合
     }
   },  
   mounted() {

   },
   methods:{

   }
 }
</script>

<style lang="scss" scoped>
    .tagBox{
      cursor: pointer;
    }
    .img{
    	width:60px;
    	cursor: pointer;
    	margin-right:10px;
    }
</style>
